<template>
  <div>
    <div class="h_header flexrowbetween">
      <span>{{dayname}}收益</span>
      <SelectTime @changeTime="changeTime" />
    </div>
    <!-- <el-row :gutter="25" class="h_content" v-loading="loading"> -->
      <!-- <el-col :span="5"> -->
    <div class="h_content flex" v-loading="loading">
      <div class="d_left">
        <div class="activebox flexcenter bg_F8F8F8 mb_30 mt_20">
          <div>
            <div class="f-14 c_000 textcenter mb_10">{{ dayname }}充值收益</div>
            <div class="flex aligncenter">
              <div class="f-24 c_000 mr_25 datainfo">{{ dataInfo.pay.now }}</div>
              <div class="f-14 c_000 mb_5">
                日环比
                <i v-if="rate1 >= 0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{ rate1 }}%
              </div>
            </div>
          </div>
        </div>
        <div class="activebox flexcenter bg_F8F8F8 mb_30 mt_20">
          <div>
            <div class="f-14 c_000 textcenter mb_10">{{ dayname }}消耗收益</div>
            <div class="flex aligncenter">
              <div class="f-24 c_000 mr_25 datainfo">{{ dataInfo.use.now }}</div>
              <div class="f-14 c_000 mb_5">
                日环比
                <i v-if="rate2 >= 0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{ rate2 }}%
              </div>
            </div>
          </div>
        </div>
        <div class="activebox flexcenter bg_F8F8F8">
          <div>
            <div class="f-14 c_000 textcenter mb_10">{{ dayname }}上新活动数</div>
            <div class="flex aligncenter">
              <div class="f-24 c_000 mr_25 datainfo">{{ dataInfo.task.now }}</div>
              <div class="f-14 c_000 mb_5">
                日环比
                <i v-if="rate3 >= 0" class="el-icon-top c_34FF5B"></i>
                <i v-else class="el-icon-bottom c_E50000"></i>
                {{ rate3 }}%
              </div>
              <!-- <div class="f-14 c_000 mb_5">周环比 <i class="el-icon-top c_34FF5B"></i>23%</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="d_right" :span="18">
        <line-chart v-if="!loading"
          :xAxis="xAxis"
          :legendname="legendname"
          :chart-data="lineChartData"
          height="360px"
        />
      </div>
    </div>
  </div>
</template>
<script>
import LineChart from "@/components/Echart/LineChart";
import SelectTime from "./SelectTime.vue";
import {
  rechargeHourList,
  rechargeDayList,
  rechargeMonthList,
} from "@/api/home";
export default {
  data() {
    return {
      loading: false,
      time: "",
      xAxis: [],
      legendname: [
        { name: "充值收益", id: "payData" },
        { name: "消耗收益", id: "useData" },
        { name: "上新活动", id: "taskData" },
      ],
      lineChartData: {
        payData: [],
        taskData: [],
        useData: [],
      },
      dayname: "今日",
      dataInfo: {
        pay: { now: "", old: "" },
        task: { now: "", old: "" },
        use: { now: "", old: "" },
      },
      rate1: "",
      rate2: "",
      rate3: "",
    };
  },
  props: {
    title: {
      default: "",
    },
  },
  components: {
    LineChart,
    SelectTime,
  },
  created() {
    this.getHourList();
  },
  methods: {
    // 选择时间
    changeTime(params) {
      // console.log(params)
      this.dayname = params.item.name
      if(params.item.value == 1){
        this.getHourList()
      }else if(params.item.value == 2||params.item.value == 3){
        this.getDayList(params.params)
      }else if(params.item.value == 4){
        this.getMonthList(params.params)
      }else{
        this.getDayList(params.params)
      }
    },

    getHourList() {
      this.loading = true;
      rechargeHourList().then((res) => {
        this.loading = false;
        this.setData(res.data);
      }).catch(()=>{
        this.loading = true;
      })
    },

    getDayList(params){
      this.loading = true;
      rechargeDayList(params).then((res) => {
        this.loading = false;
        this.setData(res.data);
      }).catch(()=>{
        this.loading = true;
      })
    },

    getMonthList(params){
      this.loading = true;
      rechargeMonthList(params).then((res) => {
        this.loading = false;
        this.setData(res.data);
      }).catch(()=>{
        this.loading = true;
      })
    },

    setData(data) {
      let xAxis = [],
        payData = [],
        taskData = [],
        useData = [];
      data.list.forEach((item) => {
        xAxis.push(item.time);
        payData.push(item.data.pay);
        taskData.push(item.data.task);
        useData.push(item.data.use);
      });
      this.xAxis = xAxis;
      this.lineChartData.payData = payData;
      this.lineChartData.taskData = taskData;
      this.lineChartData.useData = useData;

      this.dataInfo.pay = data.pay;
      this.dataInfo.use = data.use;
      this.dataInfo.task = data.task;
      let pay = data.pay;
      if (pay.old == 0) {
        this.rate1 = 0;
      } else {
        this.rate1 = (((pay.now - pay.old) / pay.old) * 100).toFixed(2);
      }
      let use = data.use;
      if (use.old == 0) {
        this.rate2 = 0;
      } else {
        this.rate2 = (((use.now - use.old) / use.old) * 100).toFixed(2);
      }
      let task = data.task;
      if (task.old == 0) {
        this.rate3 = 0;
      } else {
        this.rate3 = (((task.now - task.old) / task.old) * 100).toFixed(2);
      }
    },

    handleClick(item) {
      this.daynum = item.value;
    },
  },
};
</script>
<style lang="scss" scoped>
.h_header {
  border-bottom: 1px solid #d5d5d5;
  height: 55px;
  padding: 0 15px;
}
.h_content {
  padding: 25px;
  width: 100%;
}
.d_left{
  width: 25%;
  padding-right: 30px;
}
.d_right{
  width: 75%;
  padding-left: 30px;
}
.activebox {
  width: 100%;
  height: 82px;
  // max-width: 330px;
  padding: 15px 24px;
  // margin-right: 60px;
}
.datainfo{
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>